<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:include page="/includes/top.jsp"></jsp:include>
<div class="page-header">
	<h1></h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<table id="grid-table" class="table table-striped table-bordered">
			<thead>
				<tr id="headtr">
				<tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" type="button" id="save">
					<i class="icon-ok"></i> 保存
				</button>
				&nbsp; &nbsp; &nbsp;
				<button class="btn" type="reset" id="back">
					<i class="icon-undo"></i> 取消
				</button>
			</div>
		</div>
	</div>
</div>


<jsp:include page="/includes/bottom.jsp"></jsp:include>

<script type="text/javascript">
	var roleid = getQueryString("id");
	$(document).ready(function() {
		initTable();
		$("#save").click(function() {
			savedata();
		});
		$("#back").click(function() {
			window.history.back();
		});
	});

	var initTable = function() {
		$.ajax({
			type : "post",
			url : "rolemodules",
			data : {roleId:roleid},
			dataType : "json",
			success : function(data) {
				renderGrid(data);
			}
		});
	};

	var renderGrid = function(mobj) {
		$.ajax({
			type : "post",
			url : "operationall",
			dataType : "json",
			success : function(data) {
				if (typeof (data) == "object" && typeof (mobj) == "object") {
					var chhtml ="";
					var tr = $("#headtr").html("");
					tr.append("<th>模块名称</th>");
					for (var i = 0; i < data.length; i++) {
						var th = "<th><input type='checkbox' data='"
						+data[i].operationCode+"' class='ace checkall'><span class='lbl'></span>"
						+data[i].operationName+"</th>";
						tr.append(th);
						chhtml+="<td><input type='checkbox' name='"
						+data[i].operationCode+"' class='ace' data='"
						+data[i].operationId+"'><span class='lbl'></span></td>";
					}
					
					var tbody = $("#grid-table").find("tbody").html("");
					for (var i = 0; i < mobj.length; i++) {
						var tr = $("<tr class='module' data="+mobj[i].moduleId+"></tr>");
						tr.append("<td>" + mobj[i].moduleName + "</td>");
						tr.append(chhtml);
						tbody.append(tr);
						var checkdata = mobj[i].operation;
						for (var n = 0; n < checkdata.length; n++) {
							tr.find("input[data='" + checkdata[n].operationId + "']").prop("checked", true);
						};
					}
					
					$(".checkall").on("click", function() {
						var name = $(this).attr("data");
						if ($(this).prop("checked")) {
							$("input[name='view']").prop("checked", true);
							$("input[name='" + name + "']").prop("checked", true);
						} else {
							$("input[name='" + name + "']").prop("checked", false);
						}
					});
					
					$(".module").each(function() {
						var operation = $(this).find("input[type='checkbox']");
						operation.on("click", function() {
							if ($(this).prop("checked")) {
								operation.eq(0).prop("checked", true);
							}
						});
					});
				}
			}
		});
	};
	var getformdata = function() {
		var mdata = new Array();
		var role = new Object();
		role.name = "roleId";
		role.value = roleid;
		mdata.push(role);
		$(".module").each(function(i) {
			var operation = $(this).find("input[type='checkbox']");
			var ids = "";
			operation.each(function() {
				if ($(this).prop("checked")) {
					ids += "," + $(this).attr("data");
				}
			});
			ids = ids.substring(1);
			var a = new Object();
			a.name = "dataList[" + i + "].moduleId";
			a.value = $(this).attr("data");
			mdata.push(a);
			var b = new Object();
			b.name = "dataList[" + i + "].operationIds";
			b.value = ids;
			mdata.push(b);
		});
		return mdata;
	};
	var savedata = function() {
		var data = getformdata();
		$.ajax({
			type : "post",
			url : "addOperation",
			data : data,
			dataType : "json",
			success : function(data) {
				alert("保存成功");
			}
		});
	};
</script>